<template>
  <div class="monitor-nodes-root">

    <!-- 机器列表 -->
    <div class="monitor-nodes-apps">
      <controlPanel class="monitor-control-panel" :online-count="machines.onlineCount" :warn-clount="machines.warnCount"
        :offline-count="machines.offlineCount" @click-refresh="getMonitorAppsTree"></controlPanel>

      <div class="monitor-nodes-apps-container">
        <!-- 节点监控 -->
        <div v-for="(app, index) of machines.data" :key="app.name" class="app">
          <div class="app-name">{{ (index + 1) + '. ' + app.name + ' (' + app.children.length + ')' }}</div>
          <div class="machines">
            <div v-for="m of app.children" :key="m.machineId" :class="getMachineClass(m)" @click="selectMachine(m)">
              {{ m.envName === 'prod' ? m.appName + ' ' + m.appVersion : m.envName }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 机器详情 -->
    <div class="monitor-nodes-info" v-loading="currentMachine.machineId === ''" element-loading-text="请选择节点!">
      <infoPanel ref="InfoPanelRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from "vue";
import { monitorAppsTreeApi } from "@/api/guardcat";
import controlPanel from "./ControlPanel.vue";
import infoPanel from "./InfoPanel.vue";

const currentMachine = ref<any>({
  machineId: '',
  appName: '',
  frameworks: [],
  appVersion: '',
  envName: '',
  hostName: '',
  ipPort: '',
  startTime: '',
  lastHeartbeatTime: '',
  runTime: '',
  status: '',
})
const machines = ref<any>({
  data: [],
  onlineCount: 0,
  warnCount: 0,
  offlineCount: 0,
})
const InfoPanelRef = ref()

provide('currentMachine', currentMachine);

const selectMachine = (machine: any) => {
  currentMachine.value = machine;
  InfoPanelRef?.value?.reload();
}

const getMonitorAppsTree = () => {
  monitorAppsTreeApi().then(resp => {
    machines.value.data = resp.data;
    selectMachine(machines.value.data[0].children[0])
    setTimeout(() => {
      let data = machines.value.data;
      let onlineCount = 0, warnCount = 0, offlineCount = 0;
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].children.length; j++) {
          if (data[i].children[j].status === 'OFFLINE') {
            offlineCount++;
          } else if (data[i].children[j].alertCount > 0) {
            warnCount++;
          } else {
            onlineCount++;
          }
        }
      }
      machines.value.onlineCount = onlineCount;
      machines.value.warnCount = warnCount;
      machines.value.offlineCount = offlineCount;
    }, 0)
  })
}

/**
 * 获取机器节点的样式
 * @param machine 
 */
const getMachineClass = (machine: any): string[] => {
  let clazz: string[] = [];
  if (machine.envName === 'prod') {
    clazz.push('machine-prod');
  } else {
    clazz.push('machine');
  }
  if ((machine.status as string).toLocaleLowerCase() === 'offline') {
    clazz.push('fail-bg');
    clazz.push('fail-border');
    clazz.push('fail-hover');
  }
  else if ((machine.status as string).toLocaleLowerCase() === 'online') {
    if (machine.alertCount as number > 0) {
      clazz.push('warn-bg');
      clazz.push('warn-border');
      clazz.push('warn-hover');
      clazz.push('warn-heightlight');
    } else {
      clazz.push('succ-bg');
      clazz.push('succ-border');
      clazz.push('succ-hover');
    }
  }
  return clazz;
}

onMounted(() => {
  getMonitorAppsTree()
})

</script>

<style scoped lang="scss">
.monitor-nodes-root {
  @include box(100%, 100%);
  @include flex(row, flex-start, center);
  position: relative;
  overflow: hidden;

  .monitor-nodes-info {
    @include box(600px, 100%);
    position: relative;
  }


  .monitor-nodes-apps {
    @include flex(column, flex-start, flex-start);
    @include box(calc(100% - 600px), 100%);
    // padding: 0 0 0 0;

    .monitor-control-panel {
      box-shadow: 0 15px 15px -16px rgba(0, 0, 0, .3);
    }

    .monitor-nodes-apps-container {
      @include flex(row, flex-start, flex-start);
      @include box(100%, calc(100% - 40px));
      flex-flow: row wrap;
      align-content: flex-start;
      box-sizing: border-box;
      overflow: scroll;
      // padding-top: 10px;
      // padding-right: 0;

      .app {
        @include box(300px, 350px);
        border-radius: 8px;
        margin: 20px;
        transition: box-shadow 0.3s, height 0.3s;
        position: relative;

        background-color: var(--xz-bg-color-other);
        box-shadow: var(--xz-box-shadow);

        [class="dark"] & {
          background-color: #2f2f2f;
        }

        &:hover {
          box-shadow: var(--xz-box-shadow-dark);
        }

        .app-name {
          @include flex(row, center, center);
          @include box(100%, 25px);
          @include font(15px, 700);
          box-shadow: 0 15px 15px -16px rgba(0, 0, 0, .3);
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          z-index: 99;

          color: var(--el-color-info);
          background-color: var(--el-color-info-light-7);
          border-bottom: 1px solid #d9d9d9;

          [class="dark"] & {
            background-color: #2f2f2f;
            border-bottom: 1px solid #212121;
          }
        }
      }

      .machines {
        @include box(100%, calc(100% - 25px));
        @include flex(row, flex-start, flex-start);
        flex-flow: row wrap;
        align-content: flex-start;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        overflow: scroll;
        padding: 10px 10px 0 10px;
        box-sizing: border-box;
        transition: height 0.3s, box-shadow 0.5s, z-index 1s;

        color: #434343;

        [class="dark"] & {
          color: #cfcfcf;
        }


        .machine-prod,
        .machine {
          @include font(13px, 500);
          height: 30px;
          line-height: 25px;
          margin: 5px 7px;
          border-radius: 5px;
          text-align: center;
          box-sizing: border-box;
          cursor: pointer;
          transition: box-shadow 0.3s;

          box-shadow: 3px 3px 14px 1px rgba(0, 0, 0, 0.3);

          [class="dark"] & {
            box-shadow: 3px 3px 14px 1px rgba(0, 0, 0, 0.7)
          }
        }

        .machine-prod {
          width: 100%;
        }

        .machine {
          width: calc((100% - 60px) / 4);
        }
      }
    }
  }
}
</style>